<template>
  <view class="recharge-page">
    <view class="header">
      <view class="title">充值中心</view>
    </view>

    <!-- <view class="section">
      <view class="section-title">选择券类型</view>
      <view class="coupon-type-selector">
        <view
          class="coupon-type-item"
          :class="{ active: selectedCouponType === 'A' }"
          @tap="selectedCouponType = 'A'"
        >
          <text>A券</text>
        </view>
        <view
          class="coupon-type-item"
          :class="{ active: selectedCouponType === 'B' }"
          @tap="selectedCouponType = 'B'"
        >
          <text>B券</text>
        </view>
      </view>
    </view> -->

    <view class="section">
      <view class="section-title">充值金额</view>
      <view class="coupon-type-selector">
        <view
          class="coupon-type-item"
          v-for="item in amountList"
          :class="{ active: selectedCouponAmount === item.id }"
          :key="item.id"
          @tap="selectedCouponAmount = item.id"
        >
          <text>{{ item.amount }}</text>
        </view>
      </view>
      <view class="amount-input">
        <text class="currency">¥</text>
        <input
          type="digit"
          class="input"
          v-model="amount"
          placeholder="请输入充值金额"
        />
      </view>
    </view>
    <view>可用额度：{{ info.deduction_balance }}</view>

    <view class="submit-btn" @tap="handleSubmit">确定充值</view>
    <!-- <nut-textarea v-model="txt" /> -->
  </view>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";
import Taro from "@tarojs/taro";
import http from "@/utils/http";

import { store } from "@/store/index";
const { info, user, userType, token } = store.storeState;
const txt = ref(token.value);

// definePageConfig({
//   navigationBarTitleText: '充值',
// });

Taro.setNavigationBarTitle({
  title: "充值",
});

onMounted(() => {
  // 页面初始化时的逻辑
  http.post("/api/user/rechargeLevel").then((res) => {
    console.log("res", res);
    amountList.value = res.data.map((i) => i.columns);
    selectedCouponAmount.value = amountList.value[0].id;

    // info.deduction_balance = res.data[0].deduction_balance;
    // amount.value = amountList.value[0].amount;
  });
});

const selectedCouponType = ref("A");
const amount = ref(0);

const amountList = ref([
  // { label: '100元', value: 100 },
  // { label: '500元', value: 500 },
  // { label: '1000元', value: 1000 },
  { amount: 100.0, deduction: 80, id: "1" },
]);
const selectedCouponAmount = ref();

const doPay = (param) => {
  Taro.requestPayment({
    timeStamp: param.timeStamp,
    nonceStr: param.nonceStr,
    package: param.prepayId,
    signType: param.signType,
    paySign: param.paySign,
    success: function (res) {
      console.log("支付 success", res);
      Taro.showToast({
        title: "支付成功",
        icon: "success",
      });
      Taro.navigateBack();
      // txt.value = JSON.stringify(res)
    },
    fail: function (res) {
      console.log("支付 fail", res);
      Taro.showToast({
        title: "支付失败",
        icon: "error",
      });
      txt.value = JSON.stringify(res)
    },
    complete: function (res) {
      console.log("支付 complete", res);
    },
  });
};

const handleSubmit = () => {
  // if (!amount.value) {
  //   Taro.showToast({
  //     title: "请输入充值金额",
  //     icon: "none",
  //   });
  //   return;
  // }

  const amountNum = parseFloat(amount.value);
  // if (isNaN(amountNum) || amountNum <= 0) {
  //   Taro.showToast({
  //     title: "请输入有效金额",
  //     icon: "none",
  //   });
  //   return;
  // }

  http
    .postQuery("/api/user/recharge", {
      id: selectedCouponAmount.value,
      deduction: amountNum,
    })
    .then((res) => {
      console.log("支付 === ", res);
      // pay(res.data.prepayId)

      if(res.data?.code == 1){
        Taro.showToast({
          title: "支付成功",
          icon: "success",
        });
        return;
      }
      doPay(res.data);
    });

  /*
  Taro.showModal({
    title: "充值确认",
    content: `您选择了${
      selectedCouponType.value
    }券，充值金额为¥${amountNum.toFixed(2)}`,
    success: (res) => {
      if (res.confirm) {
        // 这里可以添加实际的充值API调用
        // Taro.showToast({
        //   title: "充值成功",
        //   icon: "success",
        //   duration: 2000,
        //   success: () => {
        //     setTimeout(() => {
        //       Taro.navigateBack();
        //     }, 2000);
        //   },
        // });

        // http
        //   .postQuery("/api/user/recharge", {
        //     id: selectedCouponAmount.value,
        //     deduction: amountNum,
        //   })
        //   .then((res) => {
        //     console.log("支付 === ", res);
        //     // pay(res.data.prepayId)
        //     doPay(res.data);
        //   });
      }
    },
  });
  */
};
</script>

<style lang="scss">
.recharge-page {
  min-height: 100vh;
  background-color: #f6f9ff;
  padding: 30rpx;

  .header {
    margin-bottom: 40rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);

    .section-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 30rpx;
    }

    .coupon-type-selector {
      display: flex;
      gap: 20rpx;

      .coupon-type-item {
        flex: 1;
        height: 80rpx;
        border-radius: 40rpx;
        border: 2rpx solid #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 28rpx;
        color: #666;

        &.active {
          background: hsl(17, 98%, 51%);
          color: #fff;
          border-color: hsl(17, 98%, 51%);
        }
      }
    }

    .amount-input {
      display: flex;
      align-items: center;
      border-bottom: 2rpx solid #eee;
      padding-bottom: 20rpx;
      margin-top: 20rpx;

      .currency {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-right: 10rpx;
      }

      .input {
        flex: 1;
        font-size: 40rpx;
        height: 80rpx;
      }
    }
  }

  .submit-btn {
    height: 90rpx;
    border-radius: 45rpx;
    background: hsl(17, 98%, 51%);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
    font-weight: bold;
    margin-top: 60rpx;
  }
}
</style>
